import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

import 'screens/bt_followed_list_screen.dart';
import 'screens/bt_conversation_list_screen.dart';
import 'utils/bt_constants.dart';

@RoutePage(name: "messageRoute")
class BtMessagePager extends StatefulWidget {
  const BtMessagePager({super.key});

  @override
  State<StatefulWidget> createState() => _BtMessageState();
}

class _BtMessageState extends State<BtMessagePager> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _tabController.addListener(_handleTabChange);
  }

  void _handleTabChange() {
    setState(() {
      // 在这里可以处理Tab切换时的UI更新
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        padding: const EdgeInsets.only(top: 58),
        child: Column(
          children: [
            Container(
              width: 288,
              height: 40,
              color: const Color(0xFFF7F8FA),
              margin: const EdgeInsets.only(left: 0, top: 2, right: 0, bottom: 2),
              padding: const EdgeInsets.only(left: 5, top: 2, right: 0, bottom: 2),
              child: TabBar(
                isScrollable: false,
                //tabAlignment: TabAlignment.center,
                dividerColor: Colors.transparent,
                indicatorColor: Colors.transparent,
                controller: _tabController,
                indicatorWeight: 0.1,
                labelColor: labelColor,
                indicatorSize: TabBarIndicatorSize.label,
                unselectedLabelColor: unselectedLabelColor,
                labelPadding: const EdgeInsets.symmetric(horizontal: 2),
                tabs: [
                  Tab(
                      child: Container(
                          height: 36,
                          padding: const EdgeInsets.only(left: 20, top: 6, right: 20, bottom: 0),
                          decoration: BoxDecoration(
                            color: _tabController.index == 0 ? const Color(0xFF4DB4FF) : Colors.transparent,
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Text("Messages",
                              style: TextStyle(
                                  fontSize: _tabController.index == 0 ? 16 : 20,
                                  color: _tabController.index == 0 ? labelColor : unselectedLabelColor)))),
                  Tab(
                      child: Container(
                          height: 36,
                          padding: const EdgeInsets.only(left: 20, top: 5, right: 20, bottom: 0),
                          decoration: BoxDecoration(
                            color: _tabController.index == 1 ? const Color(0xFF4DB4FF) : Colors.transparent,
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Text("Followed",
                              style: TextStyle(
                                  fontSize: _tabController.index == 1 ? 16 : 20,
                                  color: _tabController.index == 1 ? labelColor : unselectedLabelColor)))),
                ],
              ),
            ),
            Expanded(
                child: TabBarView(
              controller: _tabController,
              children: const [
                BtConversationListScreen(),
                BtFollowedListScreen(),
              ],
            )),
          ],
        ));
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
}
